/**
 * 搜索框
 */

import styles from "./SearchIndex.module.less";
import { Input, Button } from "antd";

function SearchIndex({ search, searchParams, reset, searchChange }) {
  return (
    <div className={styles["search-contain"]}>
      <div className={styles["item"]}>
        <div className={styles["name"]}>用户名</div>
        <div className={styles["info"]}>
          <Input
            value={searchParams.name}
            style={{ width: "200px" }}
            onChange={(e) => searchChange({ name: e.target.value })}
            placeholder="请输入"
          />
        </div>
      </div>
      <div className={styles["item"]}>
        <div className={styles["name"]}>昵称</div>
        <div className={styles["info"]}>
          <Input
            value={searchParams.nickname}
            style={{ width: "200px" }}
            onChange={(e) => searchChange({ nickname: e.target.value })}
            placeholder="请输入"
          />
        </div>
      </div>
      <div className={styles["item"]}>
        <div className={styles["name"]}>邮箱</div>
        <div className={styles["info"]}>
          <Input
            value={searchParams.email}
            style={{ width: "200px" }}
            onChange={(e) => searchChange({ email: e.target.value })}
            placeholder="请输入"
          />
        </div>
      </div>
      <div className={styles["item"]}>
        <div className={styles["name"]}>电话</div>
        <div className={styles["info"]}>
          <Input
            value={searchParams.phone}
            style={{ width: "200px" }}
            onChange={(e) => searchChange({ phone: e.target.value })}
            placeholder="请输入"
          />
        </div>
      </div>
      <div className={styles["name"]}>
        <Button
          color="primary"
          variant="solid"
          onClick={search}
          style={{ marginRight: "14px" }}
        >
          搜索
        </Button>
        <Button color="primary" variant="outlined" onClick={reset}>
          重置
        </Button>
      </div>
    </div>
  );
}

export default SearchIndex;
